<template>
	<!-- 头中尾  三段式 纯文字 列表项 -->
	<view class="index_list_one clickBox">
		<view class="index_list_one_class "
			:class="props.tag==null?'':props.tag==1?'incomeColor_'+store.state.setting.typeTag:'expensesColor_'+store.state.setting.typeTag">
			{{props.first}}
		</view>
		<view class="index_list_one_notes" :class="inputArea?'line-clamp-2':'oneLine'">
			{{props.mid}}
		</view>
		<view class="index_list_one_value oneLine"
			:class="props.tag==null?'':props.tag==1?'incomeColor_'+store.state.setting.typeTag:'expensesColor_'+store.state.setting.typeTag">
			{{props.end}}
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import store from "@/store/index.js"
	const props = defineProps({
		first: String,
		mid: String,
		end: String,
		tag: Number
	})
	const inputArea = computed(() => store.state.setting.inputArea)
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.index_list_one {
		padding: 0.3em;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&_class {
			flex-shrink: 0;
			font-weight: bold;
			padding: 0.2em 0.5em;
			border: $baseColorBorder;
			border-radius: 0.1em;
			color: $baseBlack_mid;
			font-size: $bigFontsize;
			position: relative;
			text-shadow: $baseBoxShoadow;

			// 角边框样式
			&::after {
				content: "";
				position: absolute;
				inset: 3rpx;
				opacity: 0.5;
				background-position: 0 0, 0 0, 100% 0, 0 100%;
				background-size: 2rpx 100%, 100% 2rpx, 2rpx 100%, 100% 2rpx;
				background-repeat: no-repeat;
				background-image: linear-gradient(0deg, $baseColor_mid, $baseColor_mid $smallFontsize, transparent $smallFontsize, transparent calc(100% - $smallFontsize), $baseColor_mid calc(100% - $smallFontsize)), // left
					linear-gradient(90deg, $baseColor_mid, $baseColor_mid $smallFontsize, transparent $smallFontsize, transparent calc(100% - $smallFontsize), $baseColor_mid calc(100% - $smallFontsize)),
					linear-gradient(180deg, $baseColor_mid, $baseColor_mid $smallFontsize, transparent $smallFontsize, transparent calc(100% - $smallFontsize), $baseColor_mid calc(100% - $smallFontsize)),
					linear-gradient(270deg, $baseColor_mid, $baseColor_mid $smallFontsize, transparent $smallFontsize, transparent calc(100% - $smallFontsize), $baseColor_mid calc(100% - $smallFontsize));
			}
		}

		&_notes {
			margin: 0 0.3em;
			flex: 1;
			font-size: $smallFontsize;
			color: $baseBlack_big;
			opacity: 0.8;
			word-break: break-word;
		}

		&_value {
			color: $baseBlack_mid;
			font-weight: bold;
			font-size: $midFontsize;
			word-break: break-word;
		}
	}
</style>